<template>
  <div>
    <br />
    <!-- <el-row>
      <el-tabs v-model="tabIndex" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部车辆汇总" name="0"></el-tab-pane>
       <el-tab-pane label="省部级干部用车" name="1"></el-tab-pane>
        <el-tab-pane label="党政机关用车" name="2"></el-tab-pane>
        <el-tab-pane label="事业单位用车" name="3"></el-tab-pane> 
      </el-tabs>
    </el-row> -->

    <el-row>
      <el-col style="text-align: center;">
        <el-input
          v-model.trim="searchMess"
          placeholder="输入单位名称"
          :style="'width:50%;margin:5px 0px;'"
        >
          <el-button slot="append" @click="search()">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>

    <div class="tableheader">
      <span class="descs">下级单位车辆编制({{total}}个）</span>
      <div>
        <el-button type="success" size="small" @click="download">模版下载</el-button>
        <el-button type="warning" size="small" @click="daoruType=true">导入</el-button>
        <el-button type="danger" size="small" @click="exports">导出</el-button>
      </div>
    </div>

    <el-table :data="listData" >
      <el-table-column prop="index" fixed label="序号" align="center"></el-table-column>

      <el-table-column prop="companyName" width="400" label="单位名称" header-align="center">
        <template slot-scope="scope">
          <el-button @click="editCarconfig(scope.row)" type="text">{{scope.row.companyName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="合计" align="center">
        <el-table-column prop="bzCount" label="编制" align="center"></el-table-column>
        <el-table-column prop="syCount" label="实有" align="center"></el-table-column>
      </el-table-column>
      <el-table-column label="在职省级干部用车" align="center">
        <el-table-column prop="ZzsjgbycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="ZzsjgbycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'ZzsjgbycSy')"
              type="text"
            >{{scope.row.ZzsjgbycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="离退休正省级干部用车" align="center">
        <el-table-column prop="LtxzsjgbycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="LtxzsjgbycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'LtxzsjgbycSy')"
              type="text"
            >{{scope.row.LtxzsjgbycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="离休副省级干部用车" align="center">
        <el-table-column prop="LxfsjgbycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="LxfsjgbycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'LxfsjgbycSy')"
              type="text"
            >{{scope.row.LxfsjgbycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="退休副省级干部用车" align="center">
        <el-table-column prop="TxfsjgbycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="TxfsjgbycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'TxfsjgbycSy')"
              type="text"
            >{{scope.row.TxfsjgbycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="定向化实物保障岗位用车" align="center">
        <el-table-column prop="DxhswgwycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="DxhswgwycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'DxhswgwycSy')"
              type="text"
            >{{scope.row.DxhswgwycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="机要通信用车" align="center">
        <el-table-column prop="JytxycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="JytxycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'JytxycSy')"
              type="text"
            >{{scope.row.JytxycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="应急用车" align="center">
        <el-table-column prop="YjbzycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="YjbzycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'YjbzycSy')"
              type="text"
            >{{scope.row.YjbzycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="机要通信与应急合一用车" align="center">
        <el-table-column prop="JytxyyjhyycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="JytxyyjhyycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'JytxyyjhyycSy')"
              type="text"
            >{{scope.row.JytxyyjhyycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="离退休干部管理机构用车" align="center">
        <el-table-column prop="LtxgbgljgycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="LtxgbgljgycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'LtxgbgljgycSy')"
              type="text"
            >{{scope.row.LtxgbgljgycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="调研视察督察用车" align="center">
        <el-table-column prop="DyscdcycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="DyscdcycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'DyscdcycSy')"
              type="text"
            >{{scope.row.DyscdcycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="政务接待用车" align="center">
        <el-table-column prop="ZwjdycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="ZwjdycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'ZwjdycSy')"
              type="text"
            >{{scope.row.ZwjdycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="执法执勤用车" align="center">
        <el-table-column prop="ZfzqycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="ZfzqycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'ZfzqycSy')"
              type="text"
            >{{scope.row.ZfzqycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="特种专业技术用车" align="center">
        <el-table-column prop="TzzyjsycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="TzzyjsycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'TzzyjsycSy')"
              type="text"
            >{{scope.row.TzzyjsycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="业务用车" align="center">
        <el-table-column prop="YwycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="YwycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'YwycSy')"
              type="text"
            >{{scope.row.YwycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="班车" align="center">
        <el-table-column prop="BcBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="BcSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'BcSy')"
              type="text"
            >{{scope.row.BcSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="后勤服务用车" align="center">
        <el-table-column prop="HqfwycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="HqfwycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'HqfwycSy')"
              type="text"
            >{{scope.row.HqfwycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="其他用车" align="center">
        <el-table-column prop="QtycBz" label="编制" align="center"></el-table-column>
        <el-table-column prop="QtycSy" label="实有" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showCarlist(scope.row.companyId,'QtycSy')"
              type="text"
            >{{scope.row.QtycSy}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="修改单位车辆编制" :visible.sync="dialogVisible" width="80%" @close="fetchData">
      <modDwCar v-if="dialogVisible" :id="companyId" :top="1" :down="1" :edit="1" @close2="dialogVisible=false"></modDwCar>
    </el-dialog>

    <el-dialog title="导入车辆编制信息" :visible.sync="daoruType">
      <el-upload
        class="upload_exl"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <el-button type="primary" size="mini">请选择要上传的EXCEL</el-button>
      </el-upload>
      <template>
        <el-table>
          <el-table-column label="导入结果" align="center"></el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="daoruType = false">取 消</el-button>
        <el-button type="primary" @click="daoruType = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看车辆信息" :visible.sync="carsType">
      <div class="tableheader">
        <span class="descs">车辆数目（{{Cartotal}}个）</span>
      </div>
      <el-table
        ref="multipleTable"
        :data="listCarData"
        tooltip-effect="dark"
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="carCode" label="车牌号" align="center"></el-table-column>
        <el-table-column prop="carCode" label="厂牌型号" align="center"></el-table-column>
        <el-table-column prop="useType" label="车辆使用性质" align="center"></el-table-column>
        <el-table-column prop="bugPrice" label="购置价格" align="center"></el-table-column>
        <el-table-column prop="goNum" label="行程里程" align="center"></el-table-column>
        <el-table-column prop="machineCode" label="发动机号" align="center"></el-table-column>
      </el-table>
      <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="CarpageSize"
            :total="Cartotal"
            :current-page="CarpageNo"
            @current-change="CarfetchData"
            @size-change="CarpageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<style>
[v-cloak] {
  display: none;
}
#container {
  width: 100%;
  height: 400px;
}

@media screen and (min-width: 992px) {
  .modal-dialog {
    width: 992px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}

.tableheader .descs {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
}

.upload_exl .el-upload,
.upload_exl .el-upload-dragger {
  width: 100%;
}

.upload_exl .el-upload-dragger .el-button {
  margin-top: 76px;
}
</style>
<script>
import { axios_req } from "@/api/carcommon";
import modDwCar from "../components/modDwCar/index";
import { mapGetters } from "vuex";
export default {
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"])
  },
  components: { modDwCar },
  data: function() {
    return {
      tabIndex: 0,
      searchMess: "",
      userId:"",
      companyName:"",
      companyId:"",
      total: 0,
      pageNo: 1,
      pageSize: 10,
      listData: [],
      Cartotal: 0,
      CarpageNo: 1,
      CarpageSize: 10,
      listCarData: [],
      carsType: false,
      daoruType: false,
      dialogVisible: false,
      exportdata: [],
      companyId: "0"
    };
  },
  created() {
    this.userId = this.userInfo.userid;
    this.companyName = this.userInfo.companyName;
    this.companyId = this.userInfo.comid;
    this.fetchData();
  },
  methods: {
    handleClick(tab, event) {
      var sign = event.target.getAttribute("id").split("-")[1];
      console.log(sign);
    },
    editCarconfig(val) {
      this.companyId = val.companyId;
      this.dialogVisible = true;
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }

      let url = "/admin/carconfig/findDetails.do";
      let method = "post";
      let params = {
        userId: this.userId,
        companyId: this.companyId,
        companyName: this.searchMess
      };
      let data = await axios_req(url, method, params);

      this.listData = data.data;
      for (var i in this.listData) {
        this.listData[i].index =
          Number(i) + Number(this.pageSize * (this.pageNo - 1)) + 1;
      }
      this.total = data.total;
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    CarpageSizeChange(newSize) {
      this.CarpageSize = newSize;
      this.CarpageNo = 1;
      this.fetchData();
    },
    showCarlist(val, name) {
      this.CarcompanyId = val;
      this.Carattrs = name;
      this.carsType = true;
      this.CarfetchData();
    },
    async CarfetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let url = "/admin/carconfig/findCar.do";
      let method = "post";
      let params = {
        pageNo: this.CarpageNo,
        pageSize: this.CarpageSize,
        companyId: this.CarcompanyId,
        attrs: this.Carattrs
      };
      let data = await axios_req(url, method, params);
      this.listCarData = data.data;
      for (var i in this.listCarData) {
        this.listCarData[i].index =
          Number(i) + Number(this.pageSize * (this.pageNo - 1)) + 1;
      }
      this.Cartotal = data.total;
    },
    exports() {
      this.fetchAllData();
      this.exportData();
    },
    async fetchAllData() {
      let url = "/admin/carconfig/findDetails.do";
      let method = "post";
      let params = {
        pageNo: this.pageNo,
        pageSize: 99999,
        companyName: this.searchMess
      };
      let data = await axios_req(url, method, params);
      this.exportdata = data.data;
    },
    exportData() {
      var headers =
        "单位名称,合计（编制）,合计（实有）,在职省级干部用车（编制）,在职省级干部用车（实有）,离退休正省级干部用车（编制）,离退休正省级干部用车（实有）,离休副省级干部用车（编制）,离休副省级干部用车（实有）,退休副省级干部用车（编制）,退休副省级干部用车（实有）,定向化实物保障岗位用车（编制）,定向化实物保障岗位用车（实有）,机要通信用车（编制）,机要通信用车（实有）,应急用车（编制）,应急用车（实有）,机要通信与应急合一用车（编制）,机要通信与应急合一用车（实有）,离退休干部管理机构用车（编制）,离退休干部管理机构用车（实有）,调研视察督察用车（编制）,调研视察督察用车（实有）,政务接待用车（编制）,政务接待用车（实有）,执法执勤用车（编制）,执法执勤用车（实有）,特种专业技术用车（编制）,特种专业技术用车（实有）,业务用车（编制）,业务用车（实有）,班车（编制）,班车（实有）,后勤服务用车（编制）,后勤服务用车（实有）,其他用车（编制）,其他用车（实有）";
      console.log(this.exportdata);
      if (this.exportdata.length == 0) {
        this.$message("数据初始化中，请稍后再试");
        return;
      }
      var data = this.exportdata.map(function(e) {
        return {
          companyName: e.companyName,
          bzCount: e.bzCount,
          syCount: e.syCount,
          ZzsjgbycBz: e.ZzsjgbycBz,
          ZzsjgbycSy: e.ZzsjgbycSy,
          LtxzsjgbycBz: e.LtxzsjgbycBz,
          LtxzsjgbycSy: e.LtxzsjgbycSy,
          LxfsjgbycBz: e.LxfsjgbycBz,
          LxfsjgbycSy: e.LxfsjgbycSy,
          TxfsjgbycBz: e.TxfsjgbycBz,
          TxfsjgbycSy: e.TxfsjgbycSy,
          DxhswgwycBz: e.DxhswgwycBz,
          DxhswgwycSy: e.DxhswgwycSy,
          JytxycBz: e.JytxycBz,
          JytxycSy: e.JytxycSy,
          YjbzycBz: e.YjbzycBz,
          YjbzycSy: e.YjbzycSy,
          JytxyyjhyycBz: e.JytxyyjhyycBz,
          JytxyyjhyycSy: e.JytxyyjhyycSy,
          LtxgbgljgycBz: e.LtxgbgljgycBz,
          LtxgbgljgycSy: e.LtxgbgljgycSy,
          DyscdcycBz: e.DyscdcycBz,
          DyscdcycSy: e.DyscdcycSy,
          ZwjdycBz: e.ZwjdycBz,
          ZwjdycSy: e.ZwjdycSy,
          ZfzqycBz: e.ZfzqycBz,
          ZfzqycSy: e.ZfzqycSy,
          TzzyjsycBz: e.TzzyjsycBz,
          TzzyjsycSy: e.TzzyjsycSy,
          YwycBz: e.YwycBz,
          YwycSy: e.YwycSy,
          BcBz: e.BcBz,
          BcSy: e.BcSy,
          HqfwycBz: e.HqfwycBz,
          HqfwycSy: e.HqfwycSy,
          QtycBz: e.QtycBz,
          QtycSy: e.QtycSy
        };
      });

      this.jsonToExcel(data, headers);
    },
    jsonToExcel(jsonData, headers) {
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      var str = headers + "\n";
      //增加\t为了不让表格显示科学计数法或者其他格式
      for (var i = 0; i < jsonData.length; i++) {
        for (var item in jsonData[i]) {
          str += jsonData[i][item] + "\t,";
        }
        str += "\n";
      }
      //encodeURIComponent解决中文乱码
      var uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = "单位车辆编制.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    search() {
      this.fetchData();
    },
    download() {}
  }
};
</script>
